<template>
    <!--选择入住日期-->
    <div class="hotel-booking text-left" id="_j_booking_date" style="margin-top: -20px">
        <div class="hotel-searchbar clearfix">
            <div class="hs-item hs-item-date" id="_j_check_in_date">
                <span></span>
                <input type="text" placeholder="入住日期" readonly id="sCheckIn">
                <i class="icon-bg icon-date"></i>
            </div>
            <div class="hs-item hs-item-date" id="_j_check_out_date">
                <span></span>
                <input type="text" placeholder="离店日期" readonly id="sCheckOut">
                <i class="icon-bg icon-date"></i>
            </div>
            <div class="hs-item hs-item-people" id="_j_booking_number_guests">
                <span id="sRoom">人数</span>
                <i class="icon-bg icon-person icon-p1"></i>
            </div>
            <div class="hs-item hs-item-action">
                <a class="hs-btn" id="_j_price_btn" href="javascript:;">查看价格</a>
            </div>
        </div>
        <div class="hotel-loading" id="_j_booking_info_loading" style="display:none;"><i class="loading-m"></i></div>
        <div class="not-found" id="_j_booking_info_not_found" style="display:none;">您选择的日期或人数无空房，请修改后再尝试。</div>
        <div class="book-list" id="_j_booking_info" style="display:none;"></div>
    </div>
</template>

<script>
    export default {
        name: "HotelBooking",
        data(){
            return{
                num: 3,
                sCheckIn:"",
                sCheckOut:"",
                sRoom:""
            }
        },methods:{
            optionDate:function () {
                this.sCheckIn=document.getElementById("sCheckIn").value;
                this.sCheckOut=document.getElementById("sCheckOut").value;
                this.sRoom=document.getElementById("sRoom").innerText.slice(0,1);
            }
        },
    }
</script>

<style scoped>
    .comm-meta .comm-report {
        display: none;
        font-size: 12px;
        color: #999;
        vertical-align: middle;
    }

    .comm-item:hover .comm-report {
        display: inline-block;
    }

    .comm-report:hover,
    .comm-reply-report:hover {
        color: #FF8A00;
    }

    .reply-box .comm-reply-report {
        display: none;
        font-size: 12px;
        color: #999;
        margin-left: 10px;
    }

    .comment_reply_item:hover .comm-reply-report {
        display: inline-block;
    }

    .hotel-report-dialog label {
        margin: 0 3px;
    }

    .text-left{
        text-align: left;
    }
</style>